<template>
    <div class="content">
        <div class="navscroll" ref="navsroll">
          <mu-tabs :value.sync="active2" color="green" indicator-color="black" >
            <mu-tab v-for="i in dataList.bookClassifyList" @click="liclick(i.id)">{{i.name}}</mu-tab>
          </mu-tabs>
        </div>
        <div class="listcontent" ref="sss">
          <div class="scrolly">
          <div class="demo-text" v-if="active2 === 0">
            <mu-carousel hide-controls hide-indicators>
              <mu-carousel-item v-for="i in dataList.bannerList">
                <img :src="URL +i.img">
              </mu-carousel-item>
            </mu-carousel>
            <!--每日推荐-->
            <recommend :recommend="recommend" :themeList="themeList"></recommend>
            <!--目睹小课-->
            <book-list  :bookLists="bookList"></book-list>
            <!--精品课-->
            <xscroll-list :xscrollList="xscrollList"></xscroll-list>
            <!--必听书单-->
            <choiceness-list :themeList="themeLists"></choiceness-list>
            <!--最热听书-->
            <hot-list :hotList="hotList"></hot-list>
            <!--全部听书-->
            <all-lsit></all-lsit>

          </div>
          <div class="demo-text">
            <!--/v3/home/classify/{token}/{sign}/{timestamp}/{id}-->
            <div class="mintab">
              <p v-for="(item,index) in tabdata" @click="selected(index,item.bookList)" :class="{active: activeindex == index}">{{item.name}}</p>
            </div>
            <div class="tablist">
              <div class="book-center">
                <div class="allbook" v-for=" i in databooklist" @click="tablists(i.bookid)">
                  <img :src="URL + i.bookimg" alt="">
                  <div>
                    <h6>{{i.bookname}}</h6>
                    <p>{{i.bookrecommend}}</p>
                    <span>{{i.videoduration}}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          </div>
        </div>
    </div>
</template>

<script>
   // import bookList from '@/components/bookList'
   import BScroll from 'better-scroll'
   import recommend from './recommend'
    import bookList from "./bookList";
    import xscrollList from "./xscrollList";
    import hotList from "./hotList";
   import AllLsit from "./allLsit";
   import ChoicenessList from "./choicenessList";
    export default {
        name: "navList",
      data () {
        return {
          active2: 0,
          items:[{id:1,text:"全部"},{id:2,text:"历史"},{id:3,text:"哲学"},{id:4,text:"政治"},{id:5,text:"社会学"}],
          activeindex:"-1",
          recommend:[],//每日听书
          themeList:[],//精品推荐
          themeLists:[],//必听书单
          dataList:[],//全部数据
          bookList:[],//密读小课
          hotList:[],//精品课
          xscrollList:[],//精品课
          scrolly:'',//定义滚动条
          innerHeight:0,//列表容器的高度
          tabdata:[],//tab导航数据
          databooklist:[],//tab导航下的内容

        };
      },
      components: {
        ChoicenessList,
        AllLsit,
        bookList,
        xscrollList,
        hotList,
        recommend,
      },

      mounted() {
          console.log(this.$('body'))
        this.$nextTick(()=>{
          // setTimeout(()=>{
          if (!this.scrolly) {
            this.scrolly = new BScroll(this.$refs.sss, {scrollY: true,click: true, })
            this.scrolly = new BScroll(this.$refs.navsroll, {scrollX: true,click: true, })
          } else {
            this.scrolly.refresh()
          }
        })

        let  date = new Date().getTime() //获取当前时间戳
        var obj ={token:0,page:1,timestamp:date,rows:10}
        var sign =  this.md5(this.objKeySort(obj)+'44543e5367854cfcbb3a867f32fa64a2')//加密
        var url = 'https://testapi.readerday.com/v3/home/index/'+ 0 +'/'+sign+'/'+ date +'/'+ 1 +'/'+ 10
      this.$axios.get(url)
          .then((res)=> {
            this.dataList = res.data.data
            this.bookList = res.data.data.bookList3//密读小课
            this.xscrollList = res.data.data.themeList2 //精品课
            this.hotList = res.data.data.bookList2 //热听好书
            this.recommend = res.data.data.bookList //每日听书
            this.themeList = res.data.data.themeList[0] //每日听书
            this.themeLists = res.data.data.themeList //必听书单
            console.log(this.themeList)
          })
          .catch(function (error) {
            // console.log(error);
          });


      },
      methods:{
        selected:function(index,data){
          this.activeindex = index;
          this.databooklist=[]
          this.databooklist=data
        },//点击tab里面的导航按钮
        liclick(id){
          if(id!=1){
            let  date = new Date().getTime() //获取当前时间戳
            var obj ={token:0,id:id,timestamp:date}
            var sign =  this.md5(this.objKeySort(obj)+'44543e5367854cfcbb3a867f32fa64a2')//加密
            var url = 'https://testapi.readerday.com//v3/home/classify/0/'+sign+'/'+date+'/'+id
            this.$axios.get(url)
              .then((res)=> {
                this.databooklist=[]
                this.tabdata=res.data.data;
                this.databooklist=res.data.data[0].bookList;

              })
          }
        },//点击tab导航
        tablists(id){
          this.$router.push({name:'particulars',params:{'id':id}})//调转详情页
        },
      },
      watch:{
        bannerList(val){

        },
      }

    }
</script>

<style scoped>
  .content{
    flex:1;
    -webkit-flex:1;
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    -webkit-flex-direction:column;
  }
  .navscroll{
    width: 100%;
    overflow: hidden;
    height: .52rem;
  }

  .listcontent{
    overflow: hidden;
    flex:1;
    -webkit-flex: 1;

  }
  .scrolly{
    /*height: 32.7rem;*/
  }
  .container{
    height: 100%;
  }
  .mu-tabs{
    background: #fff !important;
    height: .4rem !important;
    color: #999 !important;
    margin-bottom: .12rem;
    width: 402px;
  }
  .mu-tab-wrapper{
    height: .4rem !important;
  }
  .mu-tab-active{
    color: #444 !important;
  }
  .mu-tab{
    min-width: 67px !important;

  }
  .mintab{
    width: 100%;
    overflow: hidden;

  }
  .mintab p{
    padding: 0px .15rem;
    float: left;
    text-align: center;
    line-height: .3rem;
    height: .3rem;
  }
  .active{
    color: red;
  }
  .demo-text {

  }
  .demo-text img{
    height: 100%;
    width: 100%;
    overflow: auto;
  }
  .mu-carousel{
    height:1.8rem !important;

  }

  /*导航内容*/
  .tablist{
    margin-top: .2rem ;
  }
  .book-center>h4{
    margin-bottom: .15rem;
    margin-top: .2rem;
    font-size: .14rem;
    text-align: left;
    padding-left: .1rem;
  }
  .allbook{
    padding: 0  0.08rem;
    font-size: .12rem;
    text-align: left;
    margin-bottom: .1rem;
  }
  .allbook img{
    height: 1.1rem;
    width: .85rem;
    float: left;
    margin-right: .1rem;
  }
  .allbook h6{
    font-size: .14rem;
    margin-bottom: .05rem;
  }
  .allbook p{
    height: .7rem;
  }
</style>

<style>


</style>
